<template>
  <div>
    <lan-dialog
      :config="editConfig"
      :formData="editFormData"
    >
      <template #slot="scope">
        <el-input
          v-model="scope.data.slot"
          class="form-input"
        ></el-input>
      </template>
      <template #active="scope">
        <el-switch
          v-model="scope.data.active"
          class="form-input"
        ></el-switch>
      </template>
    </lan-dialog>
  </div>
</template>

<script>
import lanDialog from '../../../components/lanDialog';
import moment from 'moment';
import { MomentFormat, SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { parseError } from '../../../utils';
import { updateRouterApi } from '../../../api/router';
import { generateRouterTypeSelectorData } from './servers';

export default {
  components: {
    lanDialog
  },
  data() {
    return {
      editConfig: {
        labelWidth: 200,
        dialogVisible: false,
        title: '更新路由规则',
        type: 'edit',
        inline: false,
        formList: [
          {
            name: 'type',
            label: '广播类型',
            type: 'select',
            options: generateRouterTypeSelectorData(),
            optionValue: 'value',
            optionLabel: 'label',
            placeholder: '广播类型',
            required: true,
            tooltip: '选择分组的广播类型（单播、广播、多播）',
            width: 300
          },
          {
            name: 'name',
            label: '路由规则名称',
            type: 'input',
            placeholder: '请输路由规则名称',
            required: true,
            tooltip: '路由规则名称',
            width: 300
          },
          {
            name: 'description',
            label: '路由规则描述',
            type: 'input',
            placeholder: '请输路由规则描述',
            required: true,
            tooltip: '路由规则的描述信息',
            width: 300
          },
          {
            name: 'active',
            label: '开关状态',
            type: 'slot',
            required: true,
            tooltip: '是否启用路由规则，只有启用的路由规则才能使用',
            width: 300
          }
        ],
        buttons: [
          {
            text: '取消',
            icon: '',
            type: '',
            method: () => {
              this.editConfig.dialogVisible = false;
            }
          },
          {
            text: '确认',
            icon: '',
            type: 'primary',
            method: row => {
              this.update();
              this.editConfig.dialogVisible = false;
            }
          }
        ]
      },

      editFormData: {
        uuid: '',
        type: '',
        name: '',
        description: '',
        active: true
      }
    };
  },
  methods: {
    generateRouterTypeSelectorData,
    search() {
      this.$emit('search');
    },
    showEditDialog(row) {
      this.editFormData.uuid = row.uuid;
      this.editFormData.type = row.type;
      this.editFormData.name = row.name;
      this.editFormData.description = row.description;
      this.editFormData.active = row.active;
      this.editConfig.dialogVisible = true;
    },
    update() {
      this.btnLoading = true;
      updateRouterApi(this.editFormData.uuid, this.editFormData.type, this.editFormData.name, this.editFormData.description, this.editFormData.active)
        .then(res => {
          Message.success('更新成功');
          this.dialogVisible = false;
          this.search();
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body > .lan-form-container > .el-form-item {
  margin-bottom: 22px !important;
}
</style>
